<template>
	<navigatorComp title="用户反馈" bgcColor="none" fontColor="#fff"></navigatorComp>
	<view class="feedbackInput">
		<view class="feedbackInput_label">用户反馈</view>
		<up-textarea
			disableDefaultPadding
			:adjustPosition="false"
			placeholderClass="placeholderClass"
			v-model="feedbackform.feedback"
			placeholder="简要描述您要反馈的问题和意见"
			height="360rpx"
			border="none"
			count
			maxlength="200"
		></up-textarea>
		<view class="feedbackInput_label" style="margin-top: 56rpx">联系方式(选填)</view>
		<up-input
			placeholder="微信/QQ/邮箱"
			border="none"
			v-model="feedbackform.contact"
			fontSize="28rpx"
			color="#fff"
			placeholder-style="color:'#999999'"
			:customStyle="{ padding: '24rpx 32rpx', background: '#333333' }"
		></up-input>
	</view>
	<footerBtn name="提交" @clickBtn="handleSubmit" bgcColor="transparent"></footerBtn>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import MineApi from '@/API/mine/index.js';
import _ from 'lodash';

const mineApi = new MineApi();

const feedbackform = reactive({
	feedback: '',
	contact: ''
});
onLoad(() => {});

const handleSubmit = _.debounce(
	() => {
		submit();
	},
	2000,
	{ leading: true, trailing: false }
);

/**
 * 点击提交
 */
const submit = () => {
	if (!feedbackform.feedback) {
		uni.showToast({
			title: '请输入反馈内容',
			icon: 'none'
		});
		return;
	}
	mineApi
		.userFeedback({
			feedbackContent: feedbackform.feedback,
			contact: feedbackform.contact
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '反馈成功！',
					duration: 500
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			}
		});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background: url('http://112.124.50.179:8888/imgs/chaoshan/bg.png') no-repeat;
	background-size: cover;
	background-position: 100%;
}

.feedbackInput {
	margin: 32rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 32rpx 70rpx 32rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.feedbackInput_label {
		font-weight: 400;
		font-size: 32rpx;
		color: #ececec;
		line-height: 38rpx;
		margin-bottom: 32rpx;
	}
}
</style>
